<template>
  <div class="amusing">
    <div class="title">
      <img src="./../../static/image/amusing/textfour@2x.png" alt="">
    </div>
    <div class="title-min">
      <img src="./../../static/image/amusing/textone@2x.png" alt="">
    </div>
    <div class="amusing-content">
      <div class="amusing-item" 
        v-for="(item,index) in amusingList" 
        :key="item.id"
        @mouseenter="maskEnter(index)"
        @mouseleave="maskLeave(index)"
      >
        <img :src="item.imgUrl" alt="">
        <transition name="slide-fade">
          <div class="imgMask" :index="index" v-show="index==maskIndex"></div>
        </transition>
        
        <transition name="qrcode">
          <div class="QRcode" :index="index"  v-show="index==maskIndex">
            <img :src="item.QRcodeImg" alt="">
            <p class="txt">扫二维码立即体验</p>
          </div>
        </transition>
       
        <div class="itemBtn">{{item.title}}</div>
      </div>
     </div>
  </div>
</template>
<script>
export default {
  name: "amusing",
  data() {
    return {
      isShowMask: false,
      maskIndex: -1,
      amusingList: [
        {
          id: "001",
          imgUrl: "./../../static/image/amusing/Rotary@2x.png",
          title: "惊喜大转盘",
          QRcodeImg: "./../../static/image/amusing/dzp.png"
        },
        {
          id: "002",
          imgUrl: "./../../static/image/amusing/Slot@2x.png",
          title: "疯狂老虎机",
          QRcodeImg: "./../../static/image/amusing/lhj.png"
        },
        {
          id: "003",
          imgUrl: "./../../static/image/amusing/draughts@2x.png",
          title: "欢乐跳跳棋",
          QRcodeImg: "./../../static/image/amusing/ttq.png"
        }
      ]
    };
  },
  methods: {
    maskEnter(item) {
      this.maskIndex = item;
    },
    maskLeave(item) {
      this.maskIndex = -1;
    }
  }
};
</script>
<style lang='scss' scoped>
.amusing {
  text-align: center;
  .title {
    img {
      width: 350px;
    }
  }
  .title-min {
    margin: 20px 0;
    img {
      width: 380px;
    }
  }
  .amusing-content {
    padding: 0 100px;
    display: flex;
    height: 600px;
    margin-top: 50px;
    .amusing-item {
      flex: 1;
      position: relative;

      .itemBtn {
        width: 160px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        color: #fe5411;
        box-shadow: 0 0 20px -5px #fe5411;
        border-radius: 20px;
        margin: 30px auto;
        cursor: pointer;
        overflow: hidden;
      }
      .imgMask {
        width: 224px;
        height: 395px;
        background: #000;
        opacity: 0.65;
        position: absolute;
        top: 62px;
        left: 50%;
        transform: translateX(-50%);
      }
      .QRcode {
        width: 150px;
        height: 150px;
        position: absolute;
        background: saddlebrown;
        left: 50%;
        top: 44%;
        transform: translate(-50%, -50%);
        .txt {
          color: #fff;
          font-size: 10x;
          margin-top: 10px;
        }
      }
      .slide-fade-enter-active,
      .slide-fade-leave-active {
        transition: opacity 0.5s;
      }
      .slide-fade-enter,
      .slide-fade-leave-active {
        opacity: 0;
      }
      .qrcode-enter-active {
        transition: all 0.3s ease;
      }
      .qrcode-leave-active {
        transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
      }
      .qrcode-enter,
      .qrcode-leave-to {
        transform: translateY(5px);
        opacity: 0;
      }
    }
  }
}
</style>
